src/shared/api/axios.ts (5)

6-8: 기본 Content-Type 헤더 설정을 재검토하세요.

모든 요청에 application/json을 기본값으로 설정하면 파일 업로드나 폼 데이터 전송 시 문제가 발생할 수 있습니다. 필요한 경우 요청별로 헤더를 오버라이드할 수 있지만, 기본 헤더를 제거하거나 조건부로 설정하는 것을 고려하세요.

---

3-9: timeout 설정 및 타입 안정성을 개선하세요.

다음 개선 사항을 고려하세요:

• 네트워크 요청에 대한 타임아웃을 추가하여 무한 대기를 방지
• TypeScript 타입 안정성을 위해 명시적 타입 어노테이션 추가

다음 diff를 적용하여 개선하세요:

+import type { AxiosInstance } from "axios";
 import axios from "axios";

-export const api = axios.create({
+export const api: AxiosInstance = axios.create({
   baseURL: import.meta.env.VITE_BASE_URL,
   withCredentials: true,
+  timeout: 10000,
   headers: {
     "Content-Type": "application/json",
   },
 });

---

11-15: localStorage 접근에 대한 에러 핸들링을 추가하세요.

SSR 환경이나 일부 브라우저 설정에서 localStorage 접근이 실패할 수 있습니다. try-catch로 감싸 안정성을 높이세요.

다음 diff를 적용하세요:

 api.interceptors.request.use((config) => {
-  const token = localStorage.getItem("accessToken");
-  if (token) config.headers.Authorization = `Bearer ${token}`;
+  try {
+    const token = localStorage.getItem("accessToken");
+    if (token) config.headers.Authorization = `Bearer ${token}`;
+  } catch (error) {
+    console.error("localStorage 접근 실패:", error);
+  }
   return config;
 });

---

12-12: localStorage 키를 상수로 관리하세요.

"accessToken" 문자열을 하드코딩하면 유지보수가 어렵습니다. 상수로 정의하여 재사용성을 높이세요.

별도 파일에 상수를 정의하세요:

// src/shared/constants/storage.ts
export const STORAGE_KEYS = {
  ACCESS_TOKEN: "accessToken",
} as const;

그리고 다음과 같이 사용하세요:

+import { STORAGE_KEYS } from "@/shared/constants/storage";
+
 api.interceptors.request.use((config) => {
-  const token = localStorage.getItem("accessToken");
+  const token = localStorage.getItem(STORAGE_KEYS.ACCESS_TOKEN);
   if (token) config.headers.Authorization = `Bearer ${token}`;
   return config;
 });

---

20-22: 추가 HTTP 에러 처리를 고려하세요.

401 외에도 다른 HTTP 에러(403, 500, 503 등)에 대한 처리를 추가하면 사용자 경험이 개선됩니다. 예를 들어, 네트워크 에러나 서버 에러에 대한 통합 에러 토스트를 표시할 수 있습니다.

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro